<div class="box">
  <div class="box-heading">MotorMarket Blog</div>
  <script type="text/javascript">
 $(document).ready( function(){	
		var buttons = { previous:$('#jslidernews2 .button-previous') ,
						next:$('#jslidernews2 .button-next') };			 
		$('#jslidernews2').lofJSidernews( { interval:5000,
											 	easing:'easeInOutQuad',
												duration:1200,
												auto:true,
												mainWidth:<?php echo $width;?>,
												mainHeight:<?php echo $height;?> ,
												navigatorHeight		: <?php echo $height/3;?>,
												navigatorWidth		: 268,
												maxItemDisplay:3,
												buttons:buttons } );						
	});

</script>
<style>
	.lof-slidecontent  .navigator-content {
	height:<?php echo $height;?>px;
	
	}
	ul.lof-main-wapper li {
		position:relative;	
	}
	.lof-slidecontent ul.navigator-wrap-inner li img{
	height:<?php echo $height/8.26;?>px;
	width:<?php echo $width/8.6;?>px;
	}
	.lof-slidecontent .slider-description{
	width:<?php echo $width;?>px;
	}
</style>
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="jslidernews2" class="lof-slidecontent" style="width:<?php echo $width+268;?>px; height:<?php echo $height;?>px;">
	<div class="preload"><div></div></div>
            
            
            <div  class="button-previous">Previous</div>
                   
    		 <!-- MAIN CONTENT --> 
              <div class="main-slider-content" style="width:<?php echo $width;?>px; height:<?php echo $height;?>px;">
                <ul class="sliders-wrap-inner">
                <?php foreach($articles as $article){?>
                    <li style="height:<?php echo $height+10;?>px;">
                            <img src="<?php echo $article['thumb'];?>" title="<?php echo $article['name'];?>" >           
                          <div class="slider-description">
                            <h4><a href="<?php echo $article['href'];?>"><?php echo $article['name'];?></a> </h4>
                            <p><a href="<?php echo $article['href'];?>"><?php echo $article['description'];?></a></p>
                         </div>
                    </li>                   
    <?php }?> 
                
                  </ul>  	
            </div>
 		   <!-- END MAIN CONTENT --> 
           <!-- NAVIGATOR -->
           	<div class="navigator-content">
                  <div class="navigator-wrapper">
                        <ul class="navigator-wrap-inner">
                        <?php foreach($articles as $article){?>
                           <li>
                                <div>
                                    <h4 style="font-size:11px;padding:5px 0; margin:0;"><a href="<?php echo $article['href'];?>" class=""><?php echo $article['name'];?></a></h4>
                                    <img src="<?php echo $article['thumb5'];?>" align="left"/>                                    
                                    <p align="left" style="margin-right:5px;"><?php echo $article['description'];?></p>
                                </div>
                            </li>  
                            <?php }  ?>	   		
                        </ul>
                  </div>
   
             </div> 
          <!----------------- END OF NAVIGATOR --------------------->
          <div class="button-next">Next</div>
 
 		 <!-- BUTTON PLAY-STOP -->
          <div class="button-control"><span></span></div>
          <!-- END OF BUTTON PLAY-STOP -->
           
 </div> 
</div>